<template>
  <div>
    <ul ref="ulEle">
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
    <button @click="addItem">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['a', 'b', 'c']
    }
  },
  methods: {
    addItem() {
      this.list.push(`${Date.now()}`)
      this.list.push(`${Date.now()}`)
      this.list.push(`${Date.now()}`)

      const ulEle = this.$refs.ulEle
      console.log(ulEle.childNodes.length)
      // 1.异步渲染，$nextTick等待DOM渲染完再回调
      // 2.页面渲染会叫data修改做整合，多次data修改只会渲染一次
      // this.$nextTick(() => {
      //   const ulEle = this.$refs.ulEle
      //   console.log(ulEle.childNodes.length)
      // })
    }
  }

}
</script>

<style>

</style>
